 
import SearchParams from '../../../components/channel/SearchParams';
import dayjs from 'dayjs';
// 导入antd pannel，table组件
import { Table, Card,Button, Divider,Image } from 'antd';
import { useState,useEffect,useRef } from 'react';
// 导入社区团购api
import { getGroupBuy } from '../../../api/channel';
import type {GroupByParamsType} from '../../../types/index'
import type {TablePaginationConfig} from 'antd/lib/table'
import { useNavigate} from 'react-router-dom';
// 000 安装插件 npm i react-csv-downloader --save
// 001 导入插件
import CsvDownloader from 'react-csv-downloader';
import * as echarts from 'echarts';
function CommunityPurchase() {
 

  const navigate = useNavigate();
  // 定义分页数据
  const [pagination,setPagination] = useState<TablePaginationConfig>({
    current:1,
    pageSize:10,
  })

  // 定义默认查询参数
  const defaultParams:GroupByParamsType = { 
    order:'asc',
    current:1,
    size:10,
    id:'',//活动编号
    name:'',//活动名称
    startTime:'', //开始时间
    endTime:'', //结束时间
    state:'', //活动状态
    shop:'',//店铺名称
    products:'',//商品名称
  }
  
  // 泛型 类型推断
  // 定义params 查询参数
  const [params,setParams] = useState<GroupByParamsType>(defaultParams)
  // 定义groupBuyList 社区团购列表
  const [groupBuyList,setGroupBuyList] = useState([])
  // 定义获取获取团购的方法
  const getGroupBuyList = async () => {
    const res = await getGroupBuy(params);
    if(res.data.code===0){
      setGroupBuyList(res.data.data)
      // 更新分页信息
      setPagination({...res.data.pagination,pageSize:res.data.pagination.size,current:res.data.pagination.current*1})
    }
  }
  // useEffect 监听params变化
  useEffect(() => {
    getGroupBuyList()
  }, [params.current,params.size])
  useEffect(() => {
   var flag = true;
  //  遍历params如果params的键值对和defaultParams的键值对不一样，flag为false
  // 浅比较两个对象是否相等（key与value都相等）
    let key:keyof  GroupByParamsType
    for(key in params){
      if(params[key ]!==defaultParams[key]){
        flag = false
      }
    }
    // 说明params与defaultParams一样（重置后params值发生变化）
    if(flag){
      getGroupBuyList()
    }
    
  }, [params])
   
  // onChange方法
  const onChange = (pagination:TablePaginationConfig) => {
    // 更新params(重新请求数据)
    setParams({...params,current:Number(pagination.current),size:Number(pagination.pageSize)})
  }
  // 定义columns 表格列
  const columns = [
    {
      title: '活动编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '活动名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '图片',
      dataIndex: 'banner',     
      render:(banner:string) => {
        return <Image src={banner} />
      }
    },
    {
      title:'开始时间2',
      dataIndex:'startTime',
      key:'startTime',
      render:(startTime:string) => {
        return dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    {
      title:'结束时间',
      dataIndex:'endTime',
      key:'endTime',
      render:(endTime:string) => {
        return dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    {
      title:'活动状态',
      dataIndex:'state',
      key:'state',
      render:(state:number) => {
        var list = ['待开始','预告中',"进行中","已结束","提前结束"]
        return list[state]
      }
    },
    {
      title:'查看详情',
      render:(row:any) => {
        return  <a onClick={(e)=>{
          e.preventDefault();
          navigate('/admin/channel/groupBuyDetail/'+row.id)}}>查看详情</a>
      }
    }
    
  ];
  // 002 定义columns2 定义并映射标题（过滤掉查看详情）
  const columns2:any = columns.filter(item=>item.title!="查看详情").map(item=>{
      return ({id:item.dataIndex,displayName:item.title})
  })
  const  ref = useRef(null);
  useEffect(() => {
    var myChart = echarts.init(document.getElementById('mychart') as HTMLDivElement,'light');
    var list = ['待开始','预告中',"进行中","已结束","提前结束"]
    var option = {
      title: {
        text: '状态分布'
      },
      legend: {
        data: ['状态','商品数量','店铺数量']
      },
      tooltip: {},
      xAxis: {
        data: groupBuyList.map((item:any)=>{
          if(item.name){
            return item.name
          }else{
            return '无名'
          }
        })
      },
      yAxis: {},
      series: [
        {
          radius: '30%',
          top:'-200px',
          left: '50%',
          name: '状态',
          type: 'pie',           
          data: list.map((item,index)=>groupBuyList.filter((item2:any)=>item2.state==index).length).map(item=>({value:item,name:list[item]}))
        },
        {
          
          name: '商品数量',
          type: 'bar',           
          data: groupBuyList.map((item:any)=>item.products?item.products.split(",").length:'0')
        },
        {
          
          name: '店铺数量',
          type: 'line',   
          smooth:true,        
          data: groupBuyList.map((item:any)=>item.shop?item.shop.split(",").length:'0')
        }
      ]
    };
    myChart.setOption(option);
    // 绘制图表
    

  },[groupBuyList])

 
  return ( <div>
 <SearchParams params={params} setParams={setParams} getGroupBuyList={getGroupBuyList} defaultParams={defaultParams}/>
  {/* 003 使用插件
    filename="" 导出文件名
    extension="" 导出文件类型
    separator="," 用，分割  csv文件用，分割
    wrapColumnChar="" 用什么包裹 默认用空
    columns={columns2}  导出的列
    datas={groupBuyList} 导出的数据
  */}
 
    <Card title={<div  style={{display:'flex'}}><span>团购信息列表&emsp;&emsp;</span> <CsvDownloader
        filename="团购信息"
        extension=".csv"
        separator=","
        wrapColumnChar=""
        columns={columns2}
        datas={groupBuyList}
        text="DOWNLOAD" >
        <Button>下载</Button>
    </CsvDownloader></div>} type="inner">
      <Table dataSource={groupBuyList}  columns={columns} rowKey="id" pagination={pagination} onChange={onChange}/>
    </Card>
    <Card title="社区团购统计" type="inner">
      <div id="mychart" style={{width:'100%',height:'400px'}}></div>
    </Card>

  </div> );
}

export default CommunityPurchase;